<template>
  <a-modal :title="isEdit ? '编辑' : '新增'" :width="700" :visible="visible" @ok="handleModalConfirm"
    @cancel="handleModalCancel" :confirm-loading="modalLoading">
    <a-form-model ref="form" :model="form" :rules="formRules" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
      <a-form-model-item label="机构类型" required>
        <a-radio-group v-model="form.type" @change="form.institutionName = undefined">
          <a-radio value="1">API</a-radio>
          <a-radio value="2">CRM</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="机构名称" prop="institutionId">
        <a-select v-model="form.institutionId" :options="options" placeholder="请选择" allowClear></a-select>
      </a-form-model-item>
      <a-form-model-item label="计划名称" prop="planName">
        <a-input v-model="form.planName" placeholder="请输入" allowClear />
      </a-form-model-item>
      <a-form-model-item label="开始时间" prop="startTime">
        <a-time-picker v-model="form.startTime" format="HH:mm" value-format="HH:mm" />
      </a-form-model-item>
      <a-form-model-item label="结束时间" prop="endTime">
        <a-time-picker v-model="form.endTime" format="HH:mm" value-format="HH:mm" />
      </a-form-model-item>
      <a-form-model-item label="异地检测" required>
        <a-switch v-model="form.towFactorSwitch" checked-children="开启" un-checked-children="关闭" style="width:100px" />
      </a-form-model-item>
      <a-form-model-item label="启用状态" required>
        <a-switch v-model="form.status" checked-children="开启" un-checked-children="关闭" style="width:100px" />
      </a-form-model-item>
      <a-form-model-item label="每日预算数量">
        <a-input-number v-model="form.dayQuantity" :min="0" placeholder="请输入" style="width: 100%" />
      </a-form-model-item>
      <a-form-model-item label="权重">
        <a-input-number v-model="form.weight" :min="0" placeholder="请输入" style="width: 100%" />
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import * as Ajax from '@/api/institution';
export default {
  props: {
    visible: {
      type: Boolean,
    },
    default: {
      type: Object,
      default: () => { },
    },
  },
  data() {
    return {
      modalLoading: false,
      form: {
        type: '1',
        institutionId: undefined,
        institutionName: '',
        planName: '',
        startTime: '',
        endTime: '',
        dayQuantity: '',
        weight: '',
        status: false,
        towFactorSwitch: false
      },
      formRules: {
        institutionId: { required: true, message: '请选择机构名称', trigger: ['blur', 'change'] },
        planName: { required: true, message: '请输入计划名称', trigger: ['blur', 'change'] },
        startTime: { required: true, message: '请选择开始时间', trigger: ['blur', 'change'] },
        endTime: { required: true, message: '请选择结束时间', trigger: ['blur', 'change'] },
      },
      optionsApi: [],
      optionsCrm: [],
    };
  },
  computed: {
    isEdit() {
      return Object.keys(this.default).length > 0;
    },
    options() {
      return this.form.type === '1' ? this.optionsApi : this.optionsCrm;
    },
  },
  watch: {
    visible(val) {
      if (val) {
        if (this.isEdit) {
          this.form = JSON.parse(JSON.stringify(this.default));
        }
      } else {
        // this.handleModalCancel();
      }
    },
  },
  mounted() {
    this.getSelect();
  },
  methods: {
    getSelect() {
      Ajax.getPlanApiSelect().then(({ success, data }) => {
        if (success) {
          this.optionsApi = Array.isArray(data) ? data.map((it) => ({
            ...it,
            label: it.institutionName,
            value: it.id,
          })) : [];
        }
      });
      Ajax.getPlanCrmSelect().then(({ success, data }) => {
        if (success) {
          this.optionsCrm = Array.isArray(data) ? data.map((it) => ({
            ...it,
            label: it.institutionName,
            value: it.id,
          })) : [];
        }
      });
    },
    handleModalConfirm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // this.modalLoading = true;
          const params = { ...this.form };
          params.institutionName = this.options.find((it) => it.value === params.institutionId).label;
          params.status = params.status ? 0 : 1;
          params.towFactorSwitch = params.towFactorSwitch ? 1 : 0;
          console.log(params.towFactorSwitch)

          const ajaxName = this.isEdit ? 'editPlanList' : 'addPlanList';
          const message = this.isEdit ? '编辑成功' : '新增成功';
          Ajax[ajaxName](params)
            .then(({ success }) => {
              if (success) {
                this.$message.success(message);
                this.$emit('success');
                this.handleModalCancel();
              }
            })
            .finally(() => {
              this.modalLoading = false;
            });
        }
      });
    },
    handleModalCancel() {
      this.form = this.$options.data().form;
      this.$refs.form.resetFields();
      this.$emit('close');
    },
  },
};
</script>

<style lang="scss" scoped>
.table-wrap {
  margin-top: 20px;
  padding-top: 16px;
}

.btn-gruop {
  display: flex;
  justify-content: flex-end;
}

::v-deep .ant-form-item {
  &:last-child {
    margin-bottom: 0;
  }
}
</style>
